<template>
    <div class="">
        <!--<div class="handle-box">-->
        <!--<Blockquote>-->
        <!--<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addContent">添加用户</el-button>-->
        <!--</Blockquote>-->
        <!--</div>-->
        <el-tree class="filter-tree" :data="treeData" default-expand-all :props="treeProps"
                 :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.id }}: {{data.realname}} - {{data.mobile}}</span>
            <span>
              <el-button type="text" size="mini" @click="() => addUser(node, data)">
                添加
              </el-button>
              <el-button type="text" size="mini" @click="() => editUser(node, data)">
                編輯
              </el-button>
            </span>
          </span>
        </el-tree>
    </div>
</template>

<script>
    import TableTreeColumn from '@/components/table-tree-column';
    export default {
        data() {
            return {
                lanmuId: "",
                treeData: [],
                treeProps: {
                    label: "nickname"
                }
            }
        },
        components: {
            TableTreeColumn
        },
        methods: {
            init: function () {
                this.lanmuId = this.$route.query.lanmuId;
                this.getUser();
            },
            addUser(node, data) {
                this.$router.push({
                    path: '/userEdit?pid=' + data.id
                });
            },
            editUser(node, data) {
                console.log(data.id);
                this.$router.push({
                    path: '/userEdit?id='+data.id
                });
            },
            buildTree: function (data, pid) {
                var tree = [];
                var temp;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].pid == pid) {
                        var obj = data[i];
                        temp = this.buildTree(data, data[i].id);
                        if (temp.length > 0) {
                            obj.children = temp;
                        }
                        tree.push(obj);
                    }
                }
                return tree;
            },
            getUser() {
                this.$axios.get(this.HOST + '/user/getNormalUserList',
                    {
                        params: {"pageNum": 1, "pageSize": 10}
                    }
                ).then((res) => {
                    this.treeData = this.buildTree(res.data.data.list, 0);
                })
            },
        },
        created: function () {
            this.init();
        },
        computed: {}
    }

</script>

<style>
    .avatar {
        width: 40px;
        height: 40px;
    }
</style>

